<template>
  <el-container v-loading="loading">
    <div class="container" style="height: 100vh;">
      <div id="app">
        <!-- 手机模拟器 -->
        <div class="app-preview">
          <div class="app-head"></div>
          <div class="app-content">
            <div class="app-content-title" style="background:#FFF;border-bottom: 1px solid #ddd;">
              小程序导航设置
            </div>

            <div class="app-content-main">
            </div>

            <div class="app-content-nav active"
                 :style="{background: pageConfig.backgroundColor,color: pageConfig.frontColor}">
              <div class="app-content-nav-item" v-for="navItem in pageConfig.navbar">
                <img class="app-content-nav-item-icon" :src="navItem.icon">
                <div class="app-content-nav-item-text">{{navItem.text}}</div>
              </div>
            </div>

          </div>
          <div class="app-footer"></div>
        </div>

        <!-- 编辑器 -->
        <div class="app-editor" v-bind:style="appEditorConfig.fixedPosition">
          <!-- APP MAIN -->
          <div>
            <!-- 搜索框 -->
            <div class="input-group">
              <div class="input-addo">
                背景颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.backgroundColor">
                <button type="button" class="color-reset-btn"
                        @click="defaultColorReset({dataLinked: 'pageConfig.backgroundColor', color: '#FFFFFF'})">
                  重置
                </button>
              </div>
            </div>
            <div class="input-group">
              <div class="input-addo">
                文字颜色
              </div>
              <div class="input-control">
                <input type="color" class="color-input" v-model="pageConfig.frontColor">
                <button type="button" class="color-reset-btn"
                        @click="defaultColorReset({dataLinked: 'pageConfig.frontColor', color: '#000000'})">
                  重置
                </button>
              </div>
            </div>


            <!-- 分割 -->
            <div class="dashed-break-up"></div>

            <!-- 导航 -->
            <div class="nav-editor-group" v-for="(navItem,index) in pageConfig.navbar">

              <!-- 下单  -->
              <div class="input-group">
                <div class="input-addo">
                  标题
                </div>
                <div class="input-control">
                  <input type="text" v-model="navItem.text" class="text-input" placeholder="输入标题文字">
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  文字选中颜色
                </div>
                <div class="input-control">
                  <input type="color" class="color-input" v-model="navItem.active_color">
                  <button type="button" class="color-reset-btn"
                          @click="defaultColorReset({dataLinked: 'pageConfig.navbar['+ index + '].active_color', color: '#000000'})">
                    重置
                  </button>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  默认图标
                </div>
                <div class="nav-img">
                  <img class="nav-img" :src="navItem.icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址" v-model="navItem.icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal" data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.navbar['+ index + '].icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="notify-editor-group">
                <div class="input-addo">
                  选中图标
                </div>
                <div class="nav-img">
                  <img class="nav-img" :src="navItem.active_icon">
                </div>
                <div class="input-control">
                  <div class="input-item">
                    <input type="text" class="text-input" placeholder="输入或选择图片链接地址" v-model="navItem.active_icon">
                    <button type="button" class="input-choose-btn" data-toggle="modal" data-target="#exampleModalCenter"
                            @click="openPhotoLibrary({dataLinked: 'pageConfig.navbar['+ index + '].active_icon'})">
                      请选择
                    </button>
                  </div>
                </div>
              </div>

              <div class="input-group">
                <div class="input-addo">
                  跳转链接
                </div>
                <div class="input-control">
                  <select class="text-input" v-model="navItem.type" @change="openTypeChange({current: navItem})">
                    <option value="">请选择</option>
                    <option :value="linkedItem.name" v-for="linkedItem in linkedArr">{{linkedItem.name}}</option>
                  </select>
                </div>
              </div>

              <div class="input-group" v-if="navItem.open_type == 'tel'">
                <div class="input-addo">
                  电话
                </div>
                <div class="input-control">
                  <input type="text" v-model="navItem.url" class="text-input" placeholder="请输入内容">
                </div>
              </div>

              <div class="input-group" v-if="navItem.open_type == 'wxapp'">
                <div class="input-addo">
                  小程序ID
                </div>
                <div class="input-control">
                  <input type="text" v-model="navItem.url" class="text-input" placeholder="请输入小程序ID">
                </div>
              </div>

              <div class="input-group" v-if="navItem.open_type == 'web'">
                <div class="input-addo">
                  链接
                </div>
                <div class="input-control">
                  <input type="text" v-model="navItem.url" class="text-input" placeholder="请输入跳转的地址">
                </div>
              </div>

              <span class="fa-li fa fa-remove remove-icon" title="删除"
                    @click="removeNavItem({index:index})"></span>
            </div>

            <button class="btn btn-outline-secondary append-btn" @click="appendNavItem()">添加导航</button>


            <!-- 分割 -->
            <div class="dashed-break-up"></div>
          </div>

          <el-button type="success" size="small" class="display m-top submit-btn" @click="submitData()">立即保存</el-button>
        </div>

        <!-- 图片库 -->
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered photo-library" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">{{photoLibrary.title}}</h5>
                <input type="hidden">
                <button type="button" class="btn btn-primary btn-sm image-upload-btn" data-toggle="modal"
                        data-target="#exampleModal"><i class="fa fa-cloud-upload"></i> 图片上传
                </button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="image-groups">
                  <div class="image-item" v-for="photoItem in photoLibrary.photos">
                    <i class="fa-li fa fa-remove remove-icon image-item-icon"
                       @click="delPhoto({linked: photoItem})"></i>
                    <img v-bind:src="photoItem" title="图片" data-dismiss="modal" ref="choosePhoto"
                         @click="choosePhoto({linked: photoItem})">
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">
                  {{photoLibrary.returnBtnText}}
                </button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
              </div>
            </div>
          </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">图片上传</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body file-upload-module">

                <div style="margin-bottom: 20px">
                  <h4>选择图片</h4>
                  <a id='addPic' class="btn btn-info btn-sm" href="" @click="addPic">添加图片 </a>
                  <input type="file" id="uploadFile" @change="onFileChange" multiple style="display: none;">
                </div>
                <div v-if="images.length >0">
                  <ul>
                    <li v-for="(image,key) in images">
                      <img :src="image" @click='delImage(key)'/>
                      <a href="#" style="position: absolute;" @click='delImage(key)'>
                        <span class="glyphicon glyphicon-remove"></span>
                      </a>
                    </li>
                  </ul>

                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger btn-sm" @click="removeImage">移除全部图片</button>
                <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" @click='uploadImage'>上传
                </button>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </el-container>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,  // 页面加载
        name: "nav_template",                //类型：String  必有字段  备注：模板名称
        pageConfig: {    // 页面配置数据格式
          "backgroundColor": "#ffffff",                //类型：String  必有字段  备注：无
          "frontColor": "#000000",                //类型：String  必有字段  备注：无
          "navbar": [                //类型：Array  必有字段  备注：无
            {                //类型：Object  必有字段  备注：无
              "text": "跑腿",                //类型：String  必有字段  备注：无
              "active_color": "#20AD20",                //类型：String  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/icon1.png",                //类型：String  必有字段  备注：无
              "active_icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/icon1-1.png",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/index/index",                //类型：String  必有字段  备注：无
              "open_type": "redirect"                //类型：String  必有字段  备注：无
            },
            {                //类型：Object  必有字段  备注：无
              "text": "订单",                //类型：String  必有字段  备注：无
              "active_color": "#20AD20",                //类型：String  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/icon3.png",                //类型：String  必有字段  备注：无
              "active_icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/icon3-1.png",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/order-list/index",                //类型：String  必有字段  备注：无
              "open_type": "redirect"                //类型：String  必有字段  备注：无
            },
            {                //类型：Object  必有字段  备注：无
              "text": "个人",                //类型：String  必有字段  备注：无
              "active_color": "#20AD20",                //类型：String  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/icon2.png",                //类型：String  必有字段  备注：无
              "active_icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/icon2-1.png",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/user/index",                //类型：String  必有字段  备注：无
              "open_type": "redirect"                //类型：String  必有字段  备注：无
            }
          ]
        },
        appEditorConfig: {
          currentEditor: 'main',
          fixedPosition: {
            'top': '0px'
          }
        },
        photoLibrary: {
          title: '图片库',
          returnBtnText: '返回',
          dataUrl: '',
          photos: [
            // {
            //     title: '广播',
            //     photoUrl: 'images/notify.png'
            // },
            // {
            //     title: '轮播',
            //     photoUrl: 'images/banner.png'
            // }
          ]
        },
        linkedArr: [],  // 链接数组
        images: []  // 图片上传
      }
    },
    mounted: function () {
      let _this = this;

      // 默认数据加载
      this.api.getNavTemplate().then(function (res) {
        if (res.code == 1) {
          _this.name = res.data.name;
          _this.pageConfig = res.data.value;
        }
        _this.loading = false;
      }).catch(function (res) {
        throw new Error(res);
      });

      // 链接加载
      this.api.getNavLinkedUrl().then(function (res) {
        if (res.code == 1) {
          _this.linkedArr = res.data;
        }
      }).catch(function (res) {
        throw new Error(res);
      });

      // 图片加载
      _this.loadImageLibary();
    },
    methods: {
      /**
       * 加载图片库
       * */
      loadImageLibary: function () {
        let _this = this;
        this.api.getImageLibary().then(function (res) {
          if (res.code == 1) {
            // res.data 回传回来的JSON数组
            let arr = []; // 定义数组对象
            arr = res.data; // 自动将JSON数组转换为数组并且可以操作相关的API类库
            _this.photoLibrary.photos = arr;
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      defaultColorReset: function ({dataLinked: dataLinked, color: color}) {   // 默认颜色重置
        let defaultColor = color;
        eval('this.' + dataLinked + '="' + defaultColor + '"');
      },
      chooseAppView: function ({viewName}) {  // 切换编辑器显示状态
        const HEAD = 'head';
        const MAIN = 'main';
        const NAV = 'nav';
        if (viewName == HEAD) {
          this.appEditorConfig.currentEditor = HEAD;
          this.appEditorConfig.fixedPosition = {
            'top': '0px'
          }
        }

        if (viewName == MAIN) {
          this.appEditorConfig.currentEditor = MAIN;
          this.appEditorConfig.fixedPosition = {
            'top': '100px'
          }
        }

        if (viewName == NAV) {
          this.appEditorConfig.currentEditor = NAV;
          this.appEditorConfig.fixedPosition = {
            'top': '500px'
          }
        }

      },
      appendNavItem: function () { // 添加导航
        // if (this.pageConfig.navbar.length >= 5) {
        //   this.$message({
        //     showClose: true,
        //     message: '最多中能添加五个',
        //     type: 'warning'
        //   });
        //   return false;
        // }
        let navItem = {};
        this.$set(navItem, 'text', '');
        this.$set(navItem, 'active_color', '');
        this.$set(navItem, 'icon', '');
        this.$set(navItem, 'active_icon', '');
        this.$set(navItem, 'url', '');
        this.$set(navItem, 'open_type', '');
        this.pageConfig.navbar.push(navItem);
      },
      removeNavItem: function ({index: index}) { // 删除导航
        if (this.pageConfig.navbar.length <= 1) {
          this.$message({
            showClose: true,
            message: '删除最少保留一个',
            type: 'warning'
          });
          return false;
        }
        this.removeItemByIndex({index: index, data: this.pageConfig.navbar});
      },
      /**
       * 跳转类型更改
       */
      openTypeChange: function ({current: current}) {
        this.linkedArr.forEach(function (item, index) {
            if (item.name == current.type) {
              current.open_type = item.open_type;
              if (item.open_type == 'tel' || item.open_type == 'wxapp' || item.open_type == 'web' || item.open_type == 'contact') {
                current.url = '';
              } else {
                current.url = item.url;
              }
            }
          }
        );
      },
      removeItemByIndex: function ({index: index, data: data}) {  // 根据下标删除
        for (let i = index; i < data.length; i++) {
          if (i >= data.length - 1) {
            data.pop();
          } else {
            data[i] = data[i + 1];
          }
        }
      },
      choosePhoto: function ({linked: linked}) {  // 图片选择
        eval(this.photoLibrary.dataUrl + "='" + linked + "'");
      },
      delPhoto: function ({linked: linked}) { // 图片删除
        let _this = this;
        _this.api.delImageFromImageLibary({
          src: linked
        }).then(function (res) {
          if (res.code == 1) {
            _this.loadImageLibary();
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      },
      openPhotoLibrary: function ({dataLinked: dataLinked}) {
        this.photoLibrary.dataUrl = 'this.' + dataLinked;
      },
      addPic(e) {
        e.preventDefault();
        this.$('#uploadFile').trigger('click');
        return false;
      },
      onFileChange(e) {
        let files = e.target.files;
        if (!files.length) return;
        this.createImage(files);
      },
      createImage(file) {
        if (typeof FileReader === 'undefined') {
          alert('您的浏览器不支持图片上传，请升级您的浏览器');
          return false;
        }
        let image = new Image();
        let vm = this;
        let leng = file.length;
        for (let i = 0; i < leng; i++) {
          let reader = new FileReader();
          reader.readAsDataURL(file[i]);
          reader.onload = function (e) {
            vm.images.push(e.target.result);
          };
        }
      },
      delImage: function (index) {
        this.images.shift(index);
      },
      removeImage: function (e) {
        this.images = [];
      },
      /**
       * 图片上传
       */
      uploadImage: function () {
        let _this = this;
        this.api.uploadImageAlwaysImageLibary({
          images: _this.images
        }, "index").then(function (res) {
          if (res.code == 1) {
            let tempPhotos = _this.photoLibrary.photos.reverse();
            res.data.forEach(function (item, index) {
              tempPhotos.push(item);
            });
            tempPhotos.reverse();
            _this.removeImage();

            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      submitData: function () {
        let _this = this;
        _this.api.updateTemplate({
          name: _this.name,
          value: _this.pageConfig
        }).then(function (res) {
          if (res.code == 1) {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    }
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .container {
    width: 100%;
    margin: 0 15px;
  }

  .none {
    display: none;
  }

  a, input {
    outline: none;
  }

  ::-webkit-scrollbar {
    width: 0px; /*滚动条宽度*/
    height: 0px; /*滚动条高度*/
  }

  /* 系统弹窗 */
  .windowAlert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 99999;
    transition: all .5s ease 0s;
  }

  /* 图片库 */
  .photo-library {
    max-width: 1000px !important;
    max-height: 700px !important;
  }

  .photo-library .modal-body {
    max-height: 550px;
    height: 550px;
    overflow-y: auto;
  }

  .photo-library .image-groups {
    width: 100%;
  }

  .photo-library .image-item {
    display: block;
    width: 160px;
    height: 110px;
    background: #FFFFFF;
    border: 3px solid #f2f2f2;
    border-radius: 5px;
    float: left;
    margin: 10px;
  }

  .photo-library .image-item img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .image-upload-btn {
    margin-left: 780px;
  }

  /* 图片上传 */
  .file-upload-module {
    max-height: 550px;
    height: 550px;
    overflow: auto;
  }

  .file-upload-module ul {
    list-style-type: none;
  }

  .file-upload-module img {
    width: 150px;
    height: 150px;
    display: block;
    margin: 15px auto;
  }

  /* 图片删除 */
  .image-item {
    position: relative;
  }

  .photoItem {
    position: absolute;
    z-index: 99;
  }

  .image-item-icon {
    position: absolute;
    z-index: 999;
    left: 115px;
    top: 5px;
    /*display: block;*/
    background: red;
    border-radius: 999px;
    color: #ffffff;
  }

  /* 手机模型 */
  .app-preview {
    background: #FFF;
    width: 375px;
    height: 667px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 20px 0;
    padding: 15px;
    float: left;
    position: fixed;
    top: 100px;
  }

  /* 顶部 */
  .app-head {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-head:before {
    content: "";
    position: absolute;
    top: 18px;
    left: 140px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;
  }

  .app-head:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 160px;
    height: 8px;
    width: 50px;
    background: #ddd;
    border-radius: 8px;
  }

  /* 内容 */
  .app-content {
    width: 100%;
    height: 550px;
    background: #FFF;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
  }

  .app-content > .active {
    border: 2px dashed green;
  }

  /*  内容顶部 */
  .app-content .app-content-title {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
  }

  /* 内容主要区域 */
  .app-content-main {
    height: 438px;
    overflow-y: auto;
  }

  /*----------------- 导航 ------------------ */
  .app-content-nav {
    height: 58px;
    line-height: 58px;
    display: flex;
    border-top: 1px solid #eee;
  }

  .app-content-nav-item {
    flex: 1;
  }

  .app-content-nav-item-icon {
    width: 30px;
    height: 30px;
    display: block;
    margin: 3px auto;
    border-radius: 100px;
  }

  .app-content-nav-item-text {
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  /*----------------- 导航 ------------------ */

  /* 底部 */
  .app-footer {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-footer:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 150px;
    height: 30px;
    width: 60px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  /* -------------------- 编辑工具 --------------------------- */
  .app-editor {
    border: 1px solid #ddd;
    width: 650px;
    min-height: 100px;
    float: left;
    margin: 50px 0 50px 400px;
    position: relative;
    border-radius: 10px;
    padding: 15px 15px 30px;
    transition: all .5s ease 0s;
  }

  .app-editor:before {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -11px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    z-index: 111;
  }

  .app-editor:after {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -12px;
    color: rgb(221, 221, 221);
    z-index: 11;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
  }

  /* 页面 */
  .app-editor .input-group {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
    font-size: 12px;
    color: #666;
  }

  .app-editor .input-group .input-addo {
    min-width: 100px;
    text-align: right;
    margin-right: 15px;
  }

  .app-editor .input-group .input-control {
    overflow: hidden;
  }

  .app-editor .input-group .text-input {
    height: 100%;
    width: 500px;
    padding: 0 5px;
    border: 1px solid #ddd;
    color: #666;
  }

  .app-editor .input-group .color-input {
    min-width: 370px;
    height: 100%;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
    padding: 3px;
  }

  .app-editor .input-group .color-reset-btn {
    height: 100%;
    line-height: 100%;
    padding: 0 35px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .app-editor .input-group .radio-input {
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
  }

  .app-editor .input-group .radio-input-label {
    margin: 0 15px 0 3px;
  }

  .app-editor .dashed-break-up {
    width: 100%;
    border-bottom: 1px dashed #dddddd;
    margin: 0 0 15px;
  }

  /* banner添加 */
  .app-editor .nav-editor-group {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    border: 1px solid #ddd;
    margin: 0 0 15px;
    border-radius: 5px;
    position: relative;
  }

  .app-editor .nav-editor-group .nav-img {
    height: 100px;
    width: 100px;
    float: left;
    margin: 1px;
  }

  .app-editor .nav-editor-group .banner-input-group {
    float: left;
    margin-left: 15px;
  }

  .app-editor .nav-editor-group .banner-input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .app-editor .nav-editor-group .text-input {
    width: 465px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .nav-editor-group .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .app-editor .nav-editor-group .select {
    width: 490px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .nav-editor-group .remove-icon {
    position: absolute;
    top: 3px;
    left: 588px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .6);
    color: #FFFFFF;
  }

  .app-editor .append-btn {
    width: 615px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    padding: 0;
    margin: 0 0 15px;
    border-color: #dddddd;
  }

  /* 系统通知 */
  .app-editor .notify-editor-group {
    width: 615px;
    overflow: hidden;
    font-size: 12px;
    margin: 0 0 15px;
    border-radius: 5px;
    position: relative;
  }

  .app-editor .notify-editor-group .input-addo {
    float: left;
    min-width: 100px;
    text-align: right;
    margin-right: 15px;
    height: 60px;
    line-height: 60px;
    color: #666;
  }

  .app-editor .notify-editor-group .nav-img {
    height: 50px;
    width: 50px;
    float: left;
    margin: 3px 0;
  }

  .app-editor .notify-editor-group .input-control {
    float: left;
    margin-left: 15px;
  }

  .app-editor .notify-editor-group .input-item {
    height: 30px;
    line-height: 30px;
    margin: 15px 0;
  }

  .app-editor .notify-editor-group .text-input {
    width: 300px;
    float: left;
    height: 100%;
    line-height: 100%;
    border: 1px solid #ddd;
    padding: 0 5px;
    color: #666;
  }

  .app-editor .notify-editor-group .input-choose-btn {
    height: 100%;
    line-height: 100%;
    width: 100px;
    margin: 0;
    float: left;
    background: #FFFFFF;
    border: 1px solid #ddd;
  }

  .submit-btn{
    position: fixed;
    top: 180px;
    left: 1300px;
    height: 150px;
    font-size: 24px;
    width: 24px;
    white-space: pre-wrap;
    margin: 0;
    padding: 0 40px 0 20px;
    text-align: center;
  }

  /* -------------------- 编辑工具 --------------------------- */

</style>
